<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖函数</title>
</head>

<body>
    <input type="text"><button>取消</button>
    <script>
        let inputEl = document.querySelector("input");
        let CancelEl = document.querySelector("button");
        //最简单的版本
        // function debounce(fn, delay) {
        //     //每次都要记录上一次的定时器，这一次触发事件时取消上一次的定时器
        //     let timeId = null;
        //     //返回一个绑定函数
        //     return function (...args) {
        //       if(timeId) clearTimeout(timeId);
        //        timeId =  setTimeout(() => {
        //             fn.call(this,args);
        //         }, delay);
        //     }
        // }
            //加上第一次立即执行和取消功能
            function debounce(fn, delay,Immediate=true) {
            //每次都要记录上一次的定时器，这一次触发事件时取消上一次的定时器
            let timeId = null;
            //返回一个绑定函数
            return function (...args) {
            //判断是否要立即执行
            if(Immediate)
            {
                fn.call(this,...args);
                Immediate = false;
            }
            //这次被点击，取消上一个定时任务
            if(timeId) clearTimeout(timeId);
            
            //设置定时任务
            timeId = setTimeout(() => {
            fn.call(this,...args);
            }, delay);

            //设置取消任务的函数
             this.Cancel = function()
             {
                clearInterval(timeId);
             }
            }
            }
       
        
        const name = "cq";
        inputEl.oninput =debounce(function ( ) {
            console.log(inputEl.value);
        },3000);
        CancelEl.onclick =function()
        {
            inputEl.Cancel();
        }
    </script>
</body>

</html>